<!--
 * @Author: C.
 * @Date: 2023-03-07 11:18:13
-->
<template>
  <BasicModal v-bind="$attrs" @register="registerModal" @ok="handleSubmit" title="选择用户">
    <div class="user-modal">
      <Row :gutter="20">
        <Col :span="12">
          <div class="box">
            <div>选择：</div>
            <div class="box-bg">
              <Input v-model:value="keyword" @change="searchInput">
                <template #prefix>
                  <Icon icon="ant-design:search-outlined" />
                </template>
              </Input>

              <div class="user-list" v-loading="initLoading">
                <UserItem
                  v-for="item in list"
                  :user-data="item"
                  :key="item.UserId"
                  @select="selectUser"
                />
              </div>
            </div>
          </div>
        </Col>
        <Col :span="12">
          <div class="box">
            <div>已选择：{{ selected.length }}</div>
            <div class="user-list box-bg">
              <UserItem
                v-for="item in selected"
                :user-data="item"
                :key="item.UserId"
                :close="true"
                @close="delUser"
              />
            </div>
          </div>
        </Col>
      </Row>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup name="FormModel">
  import { ref, unref, watch } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { useDebounceFn } from '@vueuse/shared';
  import Icon from '/@/components/Icon';
  import UserApi from '/@/api/work/system/user';
  import { Row, Col, Input } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import UserItem from './UserItem.vue';
  import { IUserData } from './userModel';
  const emit = defineEmits(['success', 'register', 'update:users']);
  const props = defineProps({
    users: {
      type: Array as PropType<IUserData[]>,
    },
  });
  const initLoading = ref(true);
  const keyword = ref('');
  const selected = ref<IUserData[]>(props.users || []);
  const list = ref<IUserData[]>([]);

  const [registerModal, modelActions] = useModalInner((data) => {
    selected.value = props.users || data.users || [];
    unref(initLoading) && fetchData();
    modelActions.setModalProps({ confirmLoading: false });
  });

  async function handleSubmit() {
    try {
      modelActions.setModalProps({ confirmLoading: true });

      emit('success', cloneDeep(unref(selected)));
      modelActions.closeModal();
    } finally {
      modelActions.setModalProps({ confirmLoading: false });
    }
  }
  const searchInput = useDebounceFn(fetchData, 500);
  async function fetchData() {
    initLoading.value = true;
    let res = await UserApi.api_list({
      CurrentPage: 1,
      PageSize: 20,
      Keyword: unref(keyword),
    });
    initLoading.value = false;
    list.value = res.Items;
  }
  function selectUser(user: IUserData) {
    if (unref(selected).find((item) => item.UserId === user.UserId)) return;
    selected.value.push(user);
  }
  function delUser(user: IUserData) {
    let index = unref(selected).findIndex((item) => item.UserId === user.UserId);
    if (index == -1) return;
    selected.value.splice(index, 1);
  }
  watch(
    () => unref(selected).length,
    () => {
      emit('update:users', cloneDeep(unref(selected)));
    },
  );
</script>
<style lang="less" scoped>
  [data-theme='dark'] {
    .user-modal .box .box-bg {
      // border: 2px solid transparent;
      background-color: @trigger-dark-bg-color;
    }
  }

  .user-modal {
    padding: 0 15px 0 15px;

    .box {
      width: 100%;

      border: 1px;
      font-size: 17px;

      .box-bg {
        background-color: #eee;
        height: 500px;
        padding: 10px;
        border-radius: 10px;

        .user-list {
          height: 450px;
          overflow: auto;
          margin-top: 10px;

          .ant-list-split .ant-list-item {
            border-bottom: 1px solid #ccc;
          }

          .select-icon {
            width: 40px;
            background-color: @primary-color;
            height: 40px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
</style>
